<!--
@function: 修改密码对话框
@author:胡杨升
@description: 
1.描述
    改密码
2.设置
    title:String, 标题
    visible:Boolean 是否可见，这个地方只控制显示，隐藏是在内部操作innerVisible实现的
    url:String 提交的url
    yhm:String 相关的用户名，一般是从store中获取

-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="20%">
    <el-form ref="upDatePwd" :model="formModel" :rules="formRules" label-position="right" label-width="90px" size="mini" status-icon
     v-loading="loading">
      <el-form-item label="原密码:" prop="oldPwd">
        <el-input type="password" v-model="formModel.oldPwd" placeholder="请输入原密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码:" prop="newPwd">
        <el-input type="password" v-model="formModel.newPwd" auto-complete="off" placeholder="请输入5~15位密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPwd">
        <el-input type="password" v-model="formModel.confirmPwd" auto-complete="off" placeholder="请再输入一遍密码" ></el-input>
      </el-form-item>
        <el-button type="primary" @click="onConfirmPwd" size="mini">确 定</el-button>
        <el-button @click="$emit('close')" size="mini">取 消</el-button>
    </el-form>
</el-dialog>
</template>
<script>

export default {
  name:"ChangePassword",
  props:{
    title:{
      type:String,
      default:"密码修改"
    },
    visible:{
      type:Boolean,
      default:false
    },
    url:{
      type:String,
      default:""
    },
    yhm:{
      type:String,
      default:""
    }
  },
  watch:{
    visible: function (val, oldVal) {
      console.log("new=",val);
      this.innerVisible = val;
    },
    innerVisible:function(val, oldVal){
      if(!val){
        this.$emit('close');
      }
    }
  },
  methods:{
    onConfirmPwd:function(){// 密码修改对话框-确认
      var me = this;
      // 验证信息
      var ret;
      me.$refs['upDatePwd'].validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message.error("表单信息有误");
        return;
      }
      // 发送请求
      me.loading = true;
      me.formModel["yhm"] = me.yhm;
      me.postRequest(me.url,me.formModel).then((resp)=>{
        me.loading = false;
        if (resp.status == 200) {
          me.$message.success(resp.data.msg);
          me.innerVisible = false;
        } else {
          me.$message({
            message: "服务器发生错误，代码：" + resp.status,
            type: "error"
          });
        }
      });
    }
  },
  data(){
    let validateNewPwd = (rule, value, callback) => { //新密码的验证规则
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if(!/^[0-9A-Za-z]{5,15}$/.test(value)){
          callback(new Error('新密码少于5位'));
        }else{
          if (this.formModel.confirmPwd !== '') {
            this.$refs["upDatePwd"].validateField('confirmPwd');
          }
          callback();
        }
      }
    };
    let validateConfirmPwd = (rule, value, callback) => {//确认密码的验证规则
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else {
        if(!/^[0-9A-Za-z]{5,15}$/.test(value)){
          callback(new Error('确认密码少于5位'));
        }else{
          if (value !== this.formModel.newPwd) {
            callback(new Error('两次输入密码不一致!'));
          }else {
            callback();
          }
        }
      } 
    };
    return {
      innerVisible:false,
      loading:false,
      formModel:{
        oldPwd:"",
        newPwd:"",
        confirmPwd:""
      },
      formRules:{// 密码修改表单验证
        oldPwd: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { validator: validateNewPwd, trigger: 'blur' }
        ],
        confirmPwd: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { validator: validateConfirmPwd, trigger: 'blur' }
        ]
      },
    };
  }
}
</script>
<style lang="scss">

</style>
